:root {
  // brand colors
  --c-brand: #9595d9; //主色
  --c-brand-light: #dadafb; //副色
  --c-bg-img: url("/docs/.vuepress/public/bj.jpg");

  // background colors
  --c-bg: #ffffff;
  --c-bg-light: #fafafd;
  --c-bg-lighter: #eeeeee;
  --c-bg-navbar: var(--c-bg);
  --c-bg-sidebar: var(--c-bg);
  --c-bg-arrow: #cccccc;

  // text colors
  --c-text: #2c3e50;
  --c-text-accent: var(--c-brand);
  --c-text-light: #3a5169;
  --c-text-lighter: #7f7fba;
  --c-text-lightest: #6a8bad;
  --c-text-quote: #999999;

  // border colors
  --c-border: #eaecef;
  --c-border-dark: #dfe2e5;

  // custom container colors
  --c-tip: #42b983;
  --c-tip-bg: var(--c-bg-light);
  --c-tip-title: var(--c-text);
  --c-tip-text: var(--c-text);
  --c-tip-text-accent: var(--c-text-accent);
  --c-warning: #e7c000;
  --c-warning-bg: #fffae3;
  --c-warning-title: #ad9000;
  --c-warning-text: #746000;
  --c-warning-text-accent: var(--c-text);
  --c-danger: #cc0000;
  --c-danger-bg: #ffe0e0;
  --c-danger-title: #990000;
  --c-danger-text: #660000;
  --c-danger-text-accent: var(--c-text);
  --c-details-bg: #eeeeee;

  // badge component colors
  --c-badge-tip: var(--c-tip);
  --c-badge-warning: var(--c-warning);
  --c-badge-danger: var(--c-danger);

  // code blocks vars
  --code-bg-color: #f4f4fe;
  --code-hl-bg-color: #dadafb;
  --code-ln-color: #9e9e9e;
  --code-ln-wrapper-width: 3.5rem;

  // code colors
  --code-main: var(--c-brand);
  --code-black: #40405d;
  --code-blue: #4f93db;
  --code-red: #e12f5b;

  // font vars
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  // layout vars
  --navbar-height: 3.6rem;
  --navbar-padding-v: 0.7rem;
  --navbar-padding-h: 1.5rem;
  --sidebar-width: 20rem;
  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
  --content-width: 740px;
  --homepage-width: 100%;
}

html.dark {
  // brand colors
  --c-brand: #aaaaf8;
  --c-brand-light: #dadafb;

  // background colors
  --c-bg: #22272e;
  --c-bg-light: #2b313a;
  --c-bg-lighter: #262c34;

  // text colors
  --c-text: #adbac7;
  --c-text-light: #96a7b7;
  --c-text-lighter: #aaaaf8;
  --c-text-lightest: #8094a8;

  // border colors
  --c-border: #3e4c5a;
  --c-border-dark: #34404c;

  // custom container colors
  --c-tip: #318a62;
  --c-warning: #ceab00;
  --c-warning-bg: #7e755b;
  --c-warning-title: #ceac03;
  --c-warning-text: #362e00;
  --c-danger: #940000;
  --c-danger-bg: #806161;
  --c-danger-title: #610000;
  --c-danger-text: #3a0000;
  --c-details-bg: #323843;

  // code blocks vars
  --code-bg-color: #282c34;
  --code-hl-bg-color: #363b46;

  // code colors
  --code-purple: #aaaaf8;
  --code-black: fafafd;
}

// plugin-docsearch
html.dark .DocSearch {
  --docsearch-logo-color: var(--c-text);
  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
    0 2px 2px 0 rgba(3, 4, 9, 0.3);
  --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap");

body {
  font-family: "Linux Biolinum", "Noto Serif SC", Helvetica, Arial, Menlo,
    Monaco, monospace, sans-serif;
}

// plugin-back-to-top
.back-to-top {
  --back-to-top-color: var(--c-brand);
  --back-to-top-color-hover: var(--c-brand-light);
}

// plugin-docsearch
.DocSearch {
  --docsearch-primary-color: var(--c-brand);
  --docsearch-text-color: var(--c-text);
  --docsearch-highlight-color: var(--c-brand);
  --docsearch-muted-color: var(--c-text-quote);
  --docsearch-container-background: rgba(9, 10, 17, 0.8);
  --docsearch-modal-background: var(--c-bg-light);
  --docsearch-searchbox-background: var(--c-bg-lighter);
  --docsearch-searchbox-focus-background: var(--c-bg);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
  --docsearch-hit-color: var(--c-text-light);
  --docsearch-hit-active-color: var(--c-bg);
  --docsearch-hit-background: var(--c-bg);
  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
  --docsearch-footer-background: var(--c-bg);
}

// plugin-medium-zoom
.medium-zoom-overlay {
  --medium-zoom-bg-color: var(--c-bg);
}

// plugin-nprogress
#nprogress {
  --nprogress-color: var(--c-brand);
}

// plugin-pwa-popup
.pwa-popup {
  --pwa-popup-text-color: var(--c-text);
  --pwa-popup-bg-color: var(--c-bg);
  --pwa-popup-border-color: var(--c-brand);
  --pwa-popup-shadow: 0 4px 16px var(--c-brand);
  --pwa-popup-btn-text-color: var(--c-bg);
  --pwa-popup-btn-bg-color: var(--c-brand);
  --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
}

// plugin-search
.search-box {
  --search-bg-color: var(--c-bg);
  --search-accent-color: var(--c-brand);
  --search-text-color: var(--c-text);
  --search-border-color: var(--c-border);

  --search-item-text-color: var(--c-text-lighter);
  --search-item-focus-bg-color: var(--c-bg-light);
}

.navbar .site-name {
  font-family: "Comic Sans MS", sans-serif;
}

// main
.home {
  padding: var(--navbar-height) 0rem 0;
  max-width: var(--homepage-width);
  margin: 0px auto;
  display: block;

  .hero {
    text-align: center;
    background: var(--c-bg-img) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 94vh;

    img {
      opacity: 0.4;
      max-height: 120px;
      margin: 0 auto;
      padding: 20vh 0 0 0;
    }

    #main-title {
      margin: 0 auto;
      padding: 1.8rem 0 0 0;
      color: #aaaaf8;
      font-family: "Segoe Script", "Ink Free", "Segoe Print";
    }

    .description {
      color: #c4c4fa;
    }

    .actions {
      padding-bottom: 2rem;
    }

    .action-button.secondary {
      background-color: transparent;
    }
  }

  .features {
    border-top: 1px solid var(--c-border);
    max-width: 960px;
    margin: 0px auto;
    padding: 1.2rem 0;
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: stretch;
    justify-content: space-between;
  }

  .bookmarks {
    max-width: 960px;
    margin: 0 auto;

    .label {
      font-size: 1.4rem;
      border-bottom: 0px;
      margin: 2rem 0 -2rem 1rem;
      border-top: 0;
    }
    .features {
      border-top: 1px solid var(--c-border);
      max-width: 960px;
      margin: 0px auto;
      // padding: 1.2rem 0;
      margin-top: 2.5rem;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: stretch;
      justify-content: space-between;

      .feature {
        padding: 0;
        // border: 1px solid #c4c4fa;

        a {
          display: flex;
        }

        img {
          margin: 1rem;
        }

        .text {
          margin-right: 1.25rem;
        }

        h2 {
          font-size: 1.25rem;
          font-weight: 500;
          border-bottom: none;
          padding-bottom: 0;
          margin-bottom: 0;
          color: var(--c-text-light);
        }
        p {
          color: var(--c-text-lighter);
          margin-top: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .footer {
    max-width: 880px;
    margin: 0px auto;
    padding: 2.5rem;
    border-top: 1px solid var(--c-border);
    text-align: center;
    color: var(--c-text-lighter);
  }
}

// page
.last-updated .meta-item-info {
  font-family: "Linux Biolinum", "Noto Serif SC", Helvetica, Arial, Menlo,
    Monaco, monospace, sans-serif;
}

.anchor {
  margin-top: calc(0rem - var(--navbar-height));
  padding-top: calc(0rem + var(--navbar-height));
  margin-bottom: calc(-1rem);
}

//code
.theme-default-content pre code,
.theme-default-content pre[class*="language-"] code {
  color: var(--code-black);

  .token.atrule,
  .token.builtin,
  .token.important,
  .token.keyword,
  .token.selector {
    color: var(--code-main);
  }
  .token.punctuation {
    color: var(--code-black);
  }
  .token.class-name,
  .token.constant,
  .token.property,
  .token.symbol {
    color: var(--code-blue);
  }
  .token.boolean,
  .token.function,
  .token.number {
    color: var(--code-blue);
  }
  .token.attr-value,
  .token.char,
  .token.regex,
  .token.string,
  .token.variable {
    color: var(--code-red);
  }
  .token.entity,
  .token.operator,
  .token.url {
    color: var(--code-main);
  }
  .token.class-name.static-context {
    color: var(--code-blue);
  }
}
